<template>
  <el-container direction="vertical">
    <el-container style="width:100%">
      <el-main>
        <p style="color:rgb(0,0,255);font-size:30px;font-weight:bold;font-family: cursive;">热词高频邮件轮播</p>
        <div class="w650" style="padding-top: 10px;border-radius:8px;border:2px solid">
          <ul>
            <li>
              <font color="red">热门搜索：</font>
            </li>
            <li>
              <a href="/search?q=java视频教程" role="button">java视频教程</a>
            </li>
            <li>
              <a href="/search?q=SpringBoot" role="button">SpringBoot</a>
            </li>
            <li>
              <a href="/search?q=SpringCloud" role="button">SpringCloud</a>
            </li>
            <li>
              <a href="/search?q=动力节点" role="button">动力节点</a>
            </li>
            <li>
              <a href="/search?q=Mybatis" role="button">Mybatis</a>
            </li>
            <li>
              <a href="/search?q=SSM" role="button">SSM</a>
            </li>
            <li>
              <a href="/search?q=redis" role="button">redis</a>
            </li>
            <li>
              <a href="/search?q=Spark" role="button">Spark</a>
            </li>
            <li>
              <a href="/search?q=vue" role="button">vue</a>
            </li>
            <li>
              <a href="/search?q=elasticsearch" role="button">elasticsearch</a>
            </li>
            <li>
              <a href="/search?q=shiro" role="button">shiro</a>
            </li>
          </ul>
          <ul v-for="(item,index) in likelySet" :key="index" style="float:left;margin:1px">
            <li style="color:#00F">{{item}}</li>
          </ul>
        </div>
      </el-main>
    </el-container>
    <el-footer>
      <Scroll :sliders="emails" style="width:80%"/>
    </el-footer>
  </el-container>
</template>

<script>
import axios from "axios";
import scroll from "./component/scroll.vue";
export default {
  components: {
    Scroll: scroll
  },

  data() {
    return {
      emails: [], //轮播图
      likelySet: [], //热词
      likelyText: [] //热词拼接
    };
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  mounted() {
    this.getLikelyAndSearch();
    /* if (this.likelyText!="") {
          this.getInitSearch(this.likelyText);
    } */
  },
  methods: {
    getLikelyAndSearch() {
      axios
        .get("/api/retrieveLogController/likelySet?userName="+this.userSO_json.userName, {
          headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          let resultUtils = response.data;
          let likelyArr = resultUtils.data;
          this.likelySet = likelyArr;
          this.likelyText = this.likelySet.join("");
          console.log("this.likelyText", this.likelyText);
          //异步请求要想及时传入this.likelyText，必须将方法调用放置于此处
          this.getInitSearch(this.likelyText);
        })
        .catch(error => {
        this.$message({
        showClose: true,
        message: "该用户搜索记录过少，故生成的热词比较少",
        type: "warning"
      });
        });
    },
    //main
    getInitSearch(value) {
      axios
        .get("/api/EmlSearchController/" + value+"?userName="+this.userSO_json.userName, {
          headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          let list = response.data.data.content;
          console.log("let list", list);
          this.emails = JSON.parse(JSON.stringify(list));
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "后端token过期，请重新登录",
            type: "warning"
          });
        });
    }
  }
};
</script>

<style  scoped>
.el-footer {
  margin-left: -1.6%;
  height: 400px;
  width: 100%;
  position: fixed;
  bottom: 160px;
  padding: 0px;
}
</style>